<template>
  <div style="width: 100%">
    <div id="sheBeiChart" style="width:100%; height: 4.8rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: null,
	  colors:['#5470C6','#91CB74',
				'#FAC858','#E46262',
				'#73C0DE','#3CA272',
				'#FC8452','#9A60B4',
				'#FC5865','#1A60B4',
				'#2A5565','#7B69B4',
				'#6A5565','#3B29B4',
		]
    };
  },
  mixins: [echartMixins],
  mounted() {
	  setTimeout(()=>{
		  this.changData()
	  },200)
  },
  methods: {
	  async changData(){
		var _this=this;
		let result = await _this.$http.get("api/bi/getGroupSblxNums.do");
		if(result  &&  result.status===200){
			let names=[],
				data=[],
				max=0;
		 result.data.equipment.forEach((item,index)=>{
			  names.push(item.name+'\n'+item.value)
			  data.push({value: item.value,itemStyle: {
                  normal: {
                    color: this.colors[index]||'#FAC858'
                  }
                }})
			  item.value>max?max=item.value:''
		  })
		  this.draw(names,data,max)
		}
	  },
    draw(names,data,max) {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("sheBeiChart"));
      //  ----------------------------------------------------------------

      let option = {
        angleAxis: {
          interval: 1,
          type: "category",
          data: names,
          z: 10,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#00c7ff",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#00c7ff",
            margin: 8,
            fontSize: 12
          }
        },
        radiusAxis: {
          min: 0,
          max,
          interval: 20,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#00c7ff",
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "#00c7ff",
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: "#00c7ff",
              width: 1,
              type: "solid"
            }
          }
        },
        legend: {
          show: false,
          orient: "vartical",
          top: "center",
          bottom: "0%",
          itemWidth: 16,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "#A3E2F4",
            fontSize: 12,
            fontWeight: 0
          },
          data: ["A"]
        },
        polar: {},
        series: [
          {
            name: "A",
            type: "bar",
            radius: ["20%", "100%"],
            data,
            coordinateSystem: "polar"
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>